<template>
  <div>
    <div class="list">
      <img src="https://img.wifenxiao.com/h5-wfx/images/convert/convertIcons.png" class="convert-bg">
      <div class="point-detail">
        <div>
          <div class="num">{{account_point}}</div>
          <div>转换到账积分(个)</div>
        </div>
        <div>
          <div class="num">{{frozen_point}}</div>
          <div>转换冻结中积分(个)</div>
        </div>
      </div>
      <div class="point-detail">
        <div>
          <div class="num">{{account_balance}}</div>
          <div>转换到账金额(元)</div>
        </div>
        <div>
          <div class="num">{{frozen_balance}}</div>
          <div>转换冻结中金额(元)</div>
        </div>
      </div>
    </div>
    <div class="detail-list">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        :finished-text="finishedText"
        loading-text="加载中"
        @load="onLoad"
        >
        <template v-if="orderList.length > 0">
        <div class="order-list" v-for="item in orderList" :key="item.no">
          <div class="order-flex order-title">
            <div><span class="gray">订单编号：</span>{{item.order_no}}</div>
            <div class="status">{{item.convert_name}}</div>
          </div>
          <div class="margin-list">
            <div class="list-margin" v-for="(info,index) in goodInfo(item.goods_info)" :key="index">
            <div class="order-flex no-margin" v-if="info">
              <div>{{goodContent(info, 0)}}</div>
              <span class="money-num money-num-black"  v-html="scaleGoodsPriceFn(goodContent(info, 2))"></span>
            </div>
            <div class="order-flex no-margin">
              <div><span class="gray">{{goodContent(info, 1)}}</span></div>
              <div><span class="gray">{{goodContent(info, 3)}}</span></div>
            </div>
            </div>
          </div>
          <div class="order-flex">
            <div><span class="gray">订单实付</span></div>
            <span class="money-num"  v-html="scaleGoodsPriceFn(item.payment)"></span>

          </div>
                <div class="order-flex">
            <div><span class="gray">平台来源</span></div>
            <div><span>{{item.platform_name}}</span></div>
          </div>
          <div class="order-flex">
            <div><span class="gray">{{item.convert==1 ? '兑换奖励(冻结中)': '兑换奖励'}}</span></div>
            <div class="add-list" :class="item.convert==1 ?'add-black': ''">
              <span class="num-point">{{item.point}}</span>积分
              <span class="add-icon">+</span>
              <span><span class="money-num" :class="item.convert==1 ? 'money-num-black': ''" v-html="scaleGoodsPriceFn(item.balance)"></span></span>
            </div>
          </div>
        </div>
        </template>
    </van-list>
    </div>
    <template v-if="orderList.length == 0 && finished">
      <no-data :noData="noData"></no-data>
    </template>
  </div>
</template>
<script>
import Vue from 'vue'
import { List } from 'vant'
Vue.use(List)
import { scaleGoodsPrice } from '@/utils/index.js'
import { userConvertList } from '@/api/convent/conventApi.js'
import noData from '@/components/noData/index'

export default {
  data() {
    return {
      p: 1,
      orderList: [],
      account_point: 0,
      account_balance: 0,
      frozen_point: 0,
      frozen_balance: 0,
      loading: false,
      finished: false,
      error: false,
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无兑换订单',
        marginTop: '60px'
        // width: '214px',
        // txtMarginTop: '-46px'
      },
      finishedText: ''

    }
  },
  created() {
    this.$loadingWrap.show()
    userConvertList({ p: this.p }).then(res => {
      this.$loadingWrap.close()
      if (res.status == 1) {
        this.orderList = res.data.lists
        this.account_point = res.data.account_point
        this.account_balance = res.data.account_balance
        this.frozen_point = res.data.frozen_point
        this.frozen_balance = res.data.frozen_balance
        this.finishedText = res.data.lists.length == 0 ? '' : '没有更多了'
      } else {
        this.$Error(res.msg)
      }
    })
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      if(!this.finished){
        this.onLoad()
      }
    })
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    goodInfo(info) {
      if (info) {
        const newInfos = info.indexOf(';') != -1 ? info.split(';') : info.split('；')
        return newInfos
      }
    },
    goodContent(info, index) {
      if (info) {
        const newInfo = info.indexOf(',') != -1 ? info.split(',') : info.split('，')
        let newString = ''
        let newString1 = ''
        if (newInfo.length > index) {
          newString = newInfo[index].indexOf('元')
          newString1 = ''
          if (newString != -1) {
            newString1 = newInfo[index].substring(0, newString)
          } else {
            newString1 = newInfo[index]
          }
          if (index == 3) {
            const newString2 = newInfo[index].indexOf('x')
            const newString3 = newInfo[index].indexOf('X')
            if (newString2 == -1 && newString3 == -1) {
              newString1 = 'x' + newInfo[index].substring(newString)
            } else {
              newString1 = newInfo[index]
            }
          }
        }
        return newString1
      }
    },
    onLoad() {
      this.p += 1
      userConvertList({ p: this.p }).then(res => {
        if (res.status == 1) {
          if (this.p == 1) {
            this.orderList = res.data.lists
          } else {
            if (res.data.lists.length > 0) {
              this.orderList.push(...res.data.lists)
            }
          }
          this.loading = false
          if (res.data.lists.length < 10) {
            this.finished = true
            this.finishedText = res.data.lists.length == 0 ? '' : '没有更多了'
          }
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss">
.list {
  background: linear-gradient(180deg, #F62430 46.21%, #F7493E 89.02%, #F8A964 201.22%);
  // height: 416px;
  position: relative;
  overflow: hidden;
  padding: 32px 30px 72px 30px;
  .convert-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .point-detail {
    padding: 32px 0;
    position: relative;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    font-size: 28px;
    text-align: center;
    .num {
      font-weight: 700;
      font-size: 48px;
      margin-bottom: 16px;
      font-family: DIN Alternate;
    }
  }
}
.detail-list {
  padding: 0 16px;
  position: relative;
  top: -40px;
}
.order-list {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 24px 16px 0 16px;
  .margin-list {
    padding: 24px 0px;
    .list-margin {
      margin-bottom: 16px;
    }
  }
  .order-flex {
    display: flex;
    align-items: center;
    justify-content:space-between;
    font-size:28px;
    padding: 24px 0px;
    line-height: 140%;
    &.no-margin {
      padding: 0;
    }
    &.order-title {
      padding: 0;
      margin-bottom: 16px;
    }
    .gray {
      color: #999;
    }
    .status {
      color: #ED692D
    }
    .add-list {
      font-size: 20px;
      color: #FF4332;
      &.add-black {
        color: #333;
      }
      .num-point {
        font-size: 32px;
        font-family: DIN Alternate;
        font-weight: 700;
      }
      .add-icon {
        font-size: 32px;
      }
    }
  }
}
.money-num{
  .price-scale {
    font-family: DIN Alternate!important;
    font-weight: 700;
    color: #FF4332;
    .unit, .num-back{
      font-size: 20px;
    }
    .num-font {
      font-size: 32px;
    }
  }
}
.money-num-black {
  .price-scale {
    color: #333;
  }
}
</style>